fix(file-upload): re-upload same file and A11y improvements #722 - #723
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (6)
🚧 Files skipped from review as they are similar to previous changes (5)
📝 WalkthroughWalkthroughThe TEDI FileUpload gains improved accessibility, input reset behavior, focus restoration, live announcements, localized removal messages, and related tests. The Community FileUpload is marked deprecated. Tag roles and FileUpload styling are updated, alongside a TextField selector cleanup. ChangesFileUpload behavior and deprecation
TextField selector cleanup
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant FileUpload
participant useFileUpload
participant LabelProvider
User->>FileUpload: Select, remove, or clear files
FileUpload->>useFileUpload: Handle file interaction
useFileUpload->>LabelProvider: Resolve localized announcement
useFileUpload->>FileUpload: Reset input and update announcement
FileUpload->>User: Expose status and restore focus
Possibly related issues
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install timed out. The project may have too many dependencies for the sandbox. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
|
@coderabbitai review |
✅ Action performedReview finished.
|
|
@coderabbitai review |
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/tedi/components/form/file-upload/file-upload.tsx (1)
141-144: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winSet the exported component’s
displayName.
FileUploadis an exported TEDI component but does not assignFileUpload.displayName. Add it after the component declaration.As per coding guidelines, all exported components in
src/tedi/components/**/*.tsxmust have adisplayNameproperty set.Suggested addition
+FileUpload.displayName = 'FileUpload';🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/tedi/components/form/file-upload/file-upload.tsx` around lines 141 - 144, Set the exported FileUpload component’s displayName immediately after its component declaration, following the existing naming convention for exported TEDI components.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/tedi/components/form/file-upload/file-upload.tsx`:
- Around line 141-144: Set the exported FileUpload component’s displayName
immediately after its component declaration, following the existing naming
convention for exported TEDI components.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 9d5eeed4-b87c-4e85-b894-bb518427263b
📒 Files selected for processing (7)
skills/tedi-react/references/components.mdsrc/community/components/form/file-upload/file-upload.stories.tsxsrc/community/components/form/file-upload/file-upload.tsxsrc/tedi/components/form/file-upload/file-upload.spec.tsxsrc/tedi/components/form/file-upload/file-upload.tsxsrc/tedi/components/form/textfield/textfield.module.scsssrc/tedi/helpers/hooks/use-file-upload.ts
|
@coderabbitai review |
✅ Action performedReview finished.
|
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/tedi/components/tags/tag/tag.tsx (1)
81-94: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winAdd the missing
displayNameforTag.
src/tedi/components/tags/tag/tag.tsxexportsTagbut does not setTag.displayName, which violates the component guideline that exported components must declare a display name.Proposed fix
export const Tag = (props: TagProps): JSX.Element => { // ... }; + +Tag.displayName = 'Tag';🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/tedi/components/tags/tag/tag.tsx` around lines 81 - 94, Assign an explicit display name to the exported Tag component in tag.tsx, using the component’s existing Tag symbol and the project’s established displayName convention. Place the assignment alongside the component definition/export without changing its rendering or props behavior.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/tedi/helpers/hooks/use-file-upload.ts`:
- Around line 223-225: Update the success announcement in the file-upload hook
to calculate the added-file count from the newly accepted files, rather than
subtracting actualFiles.length from newFiles.length. Ensure replacing an
existing file with multiple=false announces one added file, while preserving the
existing newFiles.length > 0 guard and announce call.
- Around line 129-136: Update the announce callback to clear the live-region
announcement before scheduling the new message, ensuring repeated identical file
announcements trigger a re-render. Add a React Testing Library regression test
for two identical upload events fired within announcementTimeout and verify both
announcements are delivered.
---
Outside diff comments:
In `@src/tedi/components/tags/tag/tag.tsx`:
- Around line 81-94: Assign an explicit display name to the exported Tag
component in tag.tsx, using the component’s existing Tag symbol and the
project’s established displayName convention. Place the assignment alongside the
component definition/export without changing its rendering or props behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 863b009a-c8b7-4be7-b600-9419de704a57
📒 Files selected for processing (6)
src/tedi/components/form/file-upload/file-upload.module.scsssrc/tedi/components/form/file-upload/file-upload.spec.tsxsrc/tedi/components/form/file-upload/file-upload.tsxsrc/tedi/components/tags/tag/tag.tsxsrc/tedi/helpers/hooks/use-file-upload.tssrc/tedi/providers/label-provider/labels-map.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- src/tedi/components/form/file-upload/file-upload.spec.tsx
- src/tedi/components/form/file-upload/file-upload.tsx
2 participants
Summary by CodeRabbit
New Features
Bug Fixes
Documentation